<template>
  <div class="top-bar">
    <!-- 左侧 返回按钮 & 页面标题 -->
    <div class="left-area">
      <el-button
        type="text"
        icon="el-icon-arrow-left"
        class="returnBtn"
        @click="handleGoBack"
      >
        返回
      </el-button>
      <span class="page-title">{{ pageTitle }}</span>
    </div>

    <!-- 右侧 功能按钮组 -->
    <div class="right-area" v-if="activeP == 'zj'">
      <el-tooltip content="保存" placement="bottom">
        <el-button type="text" @click="syncData">保存</el-button>
      </el-tooltip>
      <!-- <el-tooltip content="数据" placement="bottom">
        <el-button type="text"  @click="showData"  >数据</el-button>
      </el-tooltip> -->
      <!-- <el-tooltip content="协同" placement="bottom">
        <el-button type="text"  @click="showData"  >协同</el-button>
      </el-tooltip> -->
      <el-tooltip content="分享" placement="bottom">
        <el-button type="text" @click="shareWork">分享</el-button>
      </el-tooltip>
      <!-- <el-tooltip content="评论" placement="bottom">
        <el-button type="text"  @click="showComment"  >评论</el-button>
      </el-tooltip> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "TopBar",
  props: {
    activeP: {
      type: String,
      default: () => "",
    },
    pageTitle: {
      type: String,
      default: "这里是标题",
    },
  },
  methods: {
    handleGoBack() {
      // 你可改成 this.$router.go(-1) 或其他逻辑
      this.$router.go(-1);
    },
    syncData() {
      // this.$message("执行【保存】操作 (示例)");
      this.$emit("top-click", "save");
    },
    showData() {
      this.$message("显示【数据】面板 (示例)");
    },
    shareWork() {
      // this.$message("【分享】当前页面 (示例)");
      this.$emit("top-click", "share");
    },
    showComment() {
      this.$message("【评论】弹窗 (示例)");
    },
  },
};
</script>

<style scoped lang="scss">
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 20px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 16px;

  .left-area {
    display: flex;
    align-items: center;

    .page-title {
      font-size: 16px;
      font-weight: bold;
      color: #00011b;
      margin-left: 12px;
    }
  }

  .right-area {
    display: flex;
    align-items: center;

    .el-button {
      margin-left: 30px;
      font-weight: bold;
      font-size: 13px;
      color: #00011b;
    }
  }
}
</style>
